<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>
</template>

<script setup>
// import { View, Map, TileLayer, OSM, fromLonLat } from 'ol';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';
var token = 'ee20013ff03e7d98b23e1251bc0b7cea';
// 天地图信息
const map = new Map({
  target: 'openlayersContainer',
  view,
  layers: [
    tdtLayer, tdtnameLayer
  ],
});
map.addLayer(vectorLayer);

vectorSource.on('change', (e) => {
  console.log(vectorSource.getFeatures());
})

map.on('pointermove', (e) => {
  // 获取当时鼠标的坐标
  const coordinates = e.coordinate
  // 找到当前鼠标位置是否具有要素信息
  const features = vectorSource.getFeaturesAtCoordinate(coordinates);
  const allFeatures = vectorSource.getFeatures();
  allFeatures.forEach(feature => {
    feature.setStyle(
      new Style({
        stroke: new Stroke({
          color: 'red',
          width: 1,
        }),
        fill: new Fill({
          color: 'rgba(255, 0, 0, 0.2)',
        }),
      })
    )
  })
  vectorLayer.setStyle(new Style({
    stroke: new Stroke({
      color: 'red',
      width: 1,
    }),
    fill: new Fill({
      color: 'rgba(255, 0, 0, 0.2)',
    }),
  }))
  if (features[0]) {
    console.log('666');
    features[0].setStyle(
      new Style({
        fill: new Fill({
          color: 'rgba(0,255,0,0.5)',
        }),
      }))
  }
})


const view = new View({
  center: [114.3165, 30.5264],
  zoom: 5,
  maxZoom: 18,
  minZoom: 5,
  projection: 'EPSG:4326'
})

const tdtSourse = new XYZ({
  // 天地图
  url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
  //引入高德地图
})
const tdtnameSourse = new XYZ({
  // 天地图
  url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + token,
})
const tdtnameLayer = new TileLayer({
  source: tdtnameSourse
})

const tdtLayer = new TileLayer({
  source: tdtSourse
})
const vectorSource = new VectorSource({
  url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
  //处理对应的数据格式
  format: new GeoJSON(),
})

const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: new Style({
    stroke: new Stroke({
      color: 'red',
      width: 1,
    }),
    fill: new Fill({
      color: 'rgba(255, 0, 0, 0.2)',
    }),
  }),
})


</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}

.button-container {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
</style>
